<template>
  <div id="container">
    <el-row>
      <h1><i class="el-icon-eleme"></i>{{sysname}}</h1>
    </el-row>
    <el-row>
      <el-button type="primary" @click="toadd" icon="el-icon-search">添加</el-button>
    </el-row>
    <el-row>
      <el-table :data="list" style="width:100%">
      <el-table-column prop="title" label="标题" width="280" header-align="center"/>
      <el-table-column prop="sellpoint" label="卖点" width="200" header-align="center"/>
      <el-table-column prop="price" label="价格" align="right" header-align="center"/>
      <el-table-column prop="intro" label="说明" header-align="center"/>
      <el-table-column label="[操作]" width="220" header-align="center">

      <template slot-scope="s">
        <el-button type="success" @click="toupdate(s.$index,s.row)"
        icon="el-icon-check">修改</el-button>
        <el-button type="danger" @click="del(s.$index)">删除</el-button>
      </template>
      </el-table-column>
      </el-table>
    </el-row>
     <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
           <span>
              <el-form :model="m" label-width="80px">
                 <el-form-item label="标题">
                   <el-input v-model="m.title"/>
                 </el-form-item>
                 <el-form-item label="卖点">
                   <el-input v-model="m.sellpoint"/>
                 </el-form-item>
                 <el-form-item label="价格">
                   <el-input v-model="m.price"/>
                 </el-form-item>
                 <el-form-item label="说明">
                   <el-input type="textarea" v-model="m.intro"/>
                 </el-form-item>
              </el-form>
           </span>
           <span slot="footer" class="dialog-footer">
             <el-button @click="dialogVisible=false">取消</el-button>
             <el-button @click="save">确定</el-button>
           </span>
      </el-dialog>

  </div>
</template>

<script>
  export default {
    name: "Item",
    data() {
      return {
        sysname: "京东电商平台",
        dialogVisible:false,
        index:null,
        row:null,
        m: {
          title: null,
          sellpoint: '',
          price: '',
          intro: ''
        },
        list: [{
            title: "dfdfs",
            sellpoint: "张大大",
            price: 40,
            intro: "dfdgrjjniojijf"
          },
          {
            title: "dfdfs",
            sellpoint: "张大大",
            price: 40,
            intro: "dfdgrjjniojijf"
          },
          {
            title: "dfdfs",
            sellpoint: "张大大",
            price: 40,
            intro: "dfdgrjjniojijf"
          },
          {
            title: "dfdfs",
            sellpoint: "张大大",
            price: 40,
            intro: "dfdgrjjniojijf"
          },
        ]
      }
    },
    methods:{
      toadd:function(){
        this.m={};
        this.dialogVisible=true;
        this.isUpdate=false;
      },
      toupdate:function(index,row){
        this.m=JSON.parse(JSON.stringify(row));
        this.dialogVisible=true;
        this.isUpdate=true;
        this.index=index;
      },
      save:function(){
        if(!this.isUpdate){
          this.list.splice(0,0,this.m);
        }else{
          this.list.splice(this.index,1,this.m);
        }
        this.dialogVisible=false;
      },
      del:function(index){
           this.list.splice(this.index,1);
      }
    }
  }
</script>
<style>

</style>
